<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<input type="button" name="" id="btn" value="按钮" />

	</body>
	<script type="text/javascript">
		/*    基于es6构建属于自己的发布订阅库	   */

		let _subscribe = (function() {
			//发布订阅类
			class sub {
				constructor() {
					//创建一个事件池，用来存储后期需要执行的方法
					//用数组当容器
					this.pond = []
				}
				//向事件池中追加方法   ,重复处理
				add(func) {
					let flag = this.pond.some(item => {
						return item === func
					}) !flag ? this.pond.push(func) : null
				}
				//从事件池中移除方法
				remove(func) {
					this.pond = this.pond.filter((item) => {
						return item !== func
					})
				}
				//通知事件池中的方法按照顺序依次执行
				fire(...args) {
					this.pond.forEach((item) => {
						item.call(this, ...args)
					})
				}
			}
			//暴露给外面用
			return function subscribe() {
				return new sub()
			}

		})()

		let pond = _subscribe()

		//		 数组坍陷问题

		var fn1 = function() {
			console.log(1)
		}

		var fn2 = function() {
			console.log(2)
			pond.remove(fn1)
		}

		var fn3 = function() {
			console.log(3)
		}

		pond.add(fn1)
		pond.add(fn2)
		pond.add(fn3)

		var btn = document.getElementById('btn')
		btn.onclick = function() {
			pond.fire()
		}
	</script>

</html>